﻿<!DOCTYPE html>
<html lang="zh-CN" ng-app="Training">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3600">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智慧管控平台</title>
    <link href="~/Assets/Emergency/css/base.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/index.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/banner.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/font-awesome.min.css" rel="stylesheet" />
    <style>
        .t_title {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }

        #chart_map {
            cursor: pointer;
        }

        .t_show {
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }
        #A {
            position: relative;
            top: 146px;
            right: 110px;
            float: right;
            width: 18%;
            height: 570px;
            margin-right: 10px;
        }

        .Abg {
            border: 2px solid yellow;
            background-color: rgba(255,255,0,.5);
        }

        #B {
            position: relative;
            top: 145px;
            right: 105px;
            float: right;
            width: 25%;
            height: 570px;
            margin-right: 10px;
            font-size:20px;
            color:darkgreen;
        }

        .Bbg {
            border: 2px solid darkgreen;
            background-color: rgba(127,255,170,.5);
        }

        #C {
            position: relative;
            top: 158px;
            right: 100px;
            float: right;
            width: 27%;
            height: 570px;
            margin-right: 10px;
        }

        .Cbg {
            border: 2px solid rgb(139,0,139);
            background-color: rgba(147,112,219,.5);
        }

        #T {
            position: relative;
            top: 141px;
            right: 110px;
            float: right;
            width: 20%;
            height: 570px
        }

        .Tbg {
            border:2px solid blue;
            background-color: rgba( 0,0,255,.5);
        }
        .Atip {
            background-color: rgba(255,255,0,.6);
            color: white;
        }

        .Btip {
            background-color: rgba(127,255,170,.6);
            color: white;
        }

        .Ctip {
            background-color: rgba(147,112,219,.6);
            color: white;
        }

        .Ttip {
            background-color: rgba( 0,0,255,.6);
            color: white;
        }
        .alter {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background-color: rgba(0, 0, 0, .7);
            display: none;
        }

        .message {
            width: 80%;
            box-sizing: content-box;
            height: auto;
            margin: 50px auto;
            border-radius: 5px;
            overflow: auto;
        }

        .content {
            font-family: Arial;
            font-size: 16px;
            margin: 30px auto;
            width: 90%;
            line-height: 30px;
        }

        .menu-active {
            color: #2C58A6;
            font-weight: bold;
        }

        #triangle-topleft {
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-right: 100px solid transparent;
        }

        #triangle-topright {
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-left: 100px solid transparent;
        }

        .factory-active {
            color: white;
            font-weight: bold;
        }

            .factory-active:hover {
                color: white;
                font-weight: bold;
            }

        .main_title a:hover {
            text-decoration: none;
        }

        .alarm {
            color: red;
        }

        .carInfo {
            width: 0;
            height: 0;
            background: #061f3e;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            border-radius: 8px;
            display: none;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

        .filterbg {
            width: 100%;
            height: 100%;
            background: rgba(30,182,254,0.5);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998;
            display: none;
        }

        .carInfo .carClose {
            display: block;
            width: 44px;
            height: 44px;
            background: url(../../Assets/DashBoard/images/s_ico3.png);
            background-size: 100% 100%;
            position: absolute;
            top: -22px;
            right: -22px;
            display: none;
            transition: 0.3s;
        }

            .carInfo .carClose:hover {
                transform: rotate(180deg);
            }
    </style>
</head>
<body style="height:100%; overflow:hidden;" ng-controller="TraingingController" ng-init="
      Area='@(Request.QueryString["Area"].IsEmpty() ? "N" : Request.QueryString["Area"])';
      InitPage(Area);
      ">
    <div class="weather" style="position:absolute;top:40px;left:30px;color:white;font-size:11px;">
        <p style="font-family:electronicFont;margin:0px;" id="weather_pvg"></p>
        <p style="font-family:electronicFont;margin:0px;" id="weather_dc"></p>
    </div>
    <div class="time_div" style="position: absolute; top: 53px; right: 30px; color: white; font-size:15px;">
        <div id="now"></div>
    </div>
    <!--header-->
    <div class="header">
        <div class="bg_header">
            <div class="header_nav fl t_title">
                安全教育
            </div>
        </div>
    </div>
    <div class="data_content" style="height:1800px;">
        <div class="data_main">
            <div class="main_center" style="height:700px; width:80%; margin:0px auto;">
                <div class="center_text" style="height:800px;">
                    <!--左上边框-->
                    <div class="t_line_box" style="pointer-events:none;">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box" style="pointer-events:none;">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box" style="pointer-events:none;">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box" style="pointer-events:none;">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title" style="z-index:0;">
                        <span class="glyphicon glyphicon-globe"></span>
                        厂区地图&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    
                    <div style="width:100%;height:100%;z-index:1000;cursor:pointer;background-image:url('../../Assets/Emergency/img/tpvg.png');background-size:cover;">
                        <div id="A">
                            <a style="display:block;width:100%;height:100%;" ng-click="ShowTip('A');"></a>
                        </div>
                        <div id="B" ng-click="ShowTip('B');" style="color:black;font-size:">
                            
                        </div>
                        <div id="C" ng-click="ShowTip('C');" style="color:black;">
                            

                        </div>
                        <div id="T" ng-click="ShowTip('T');" style="color:black;">

                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="alter" ng-click="HideTip();">
        <div class="message Atip" id="ATip" ng-show="Area=='A'">
            <p class="content">
                进入A区办公区<br />
                参加会议或活动，请在前台做好登记<br />
                进入办公楼请保持安静，请勿大声喧哗、追逐打闹<br />
                请勿进入与本次来访无关的办公室、会议室、实验室等区域<br />
                请勿随意翻阅办公区域资料、文件<br />
                请勿在公共场所探讨、交流来访工作或其他公司内部信息<br />
                祝您来访顺利<br />
            </p>
        </div>
        <div class="message Btip" id="BTip" ng-show="Area=='B'">
            <p class="content">
                进入B区零件/工装加工区<br />
                进入零件/工装加工区，请遵守车间内各类安全警示标识要求，<br />
                遵从相关人员引导，在安全通道内行走，<br />
                请勿穿裙子、短裤、高跟鞋、拖鞋进入作业区域。<br />
                如需进入生产作业区域，请按要求佩戴相应安全防护用品。<br />
                未经许可，严禁触碰任何设施设备、产品，<br />
                严禁进入与业务无关的区域。<br />
                请注意脚下安全，不得在车间内追逐打闹<br />
                留意场内物流车辆的动向和灯光鸣笛等信号示意，注意避让<br />
                祝您来访顺利<br />
            </p>
        </div>
        <div class="message Ctip" id="CTip" ng-show="Area=='C'">
            <p class="content">
                进入C区装配区，严禁携带易燃易爆物品，<br />
                请遵从相关人员引导，在安全通道内行走<br />
                未经许可，请勿进入生产作业区域。<br />
                请勿穿裙子、短裤、高跟鞋、拖鞋进入生产作业区域<br />
                请勿跨越警示带或护栏，请勿触碰任何设施设备和产品<br />
                严禁进入吊装、危险作业等区域<br />
                留意场内物流车辆的动向和灯光鸣笛等信号示意，注意避让<br />
                如需进入生产作业区域，请按要求佩戴相应安全防护用品<br />
                如需登机，应办理相关手续，经确认后，在对接部门陪同下，进行登机前安全检查，<br />
                并由相关人员核实确认<br />
                未经允许禁止摄影或摄像<br />
                离开前，请确认所有物品齐全且全部带离<br />
                祝您来访顺利<br />
            </p>
        </div>
        <div class="message Ttip" id="TTip" ng-show="Area=='T'">
            <p class="content">
                进入T区
                严禁携带易燃易爆物品<br />
                进入工作现场时，应由对接部门人员陪同，办理相关手续<br />
                如需登机作业，请佩戴好工作证，填写《机上操作检查登记表》或《机上工作记录单》<br />
                经确认后，在对接部门陪同下，进行登机前安全检查，并由相关人员核实确认<br />
                未经允许，禁止摄影或摄像。<br />
                离开前，请确认所有物品齐全且全部带离。<br />
                请将执行工作时打开的舱门/口盖关闭，将所有借用的工具归还，梯架放回原位<br />
                祝您来访顺利<br />
            </p>
        </div>
    </div>
    <script src="~/Assets/Scripts/base/angular.js"></script>
    <script type="text/javascript" src="~/Assets/DashBoard/js/jquery.min.js"></script>
    <script src="~/Assets/Scripts/libs/bootstrap.min.js"></script>
    <script>
        var app = angular.module('Training', []);
        app.controller("TraingingController", function ($scope, $http, $window, $filter, $interval, $compile) {
            $scope.InitPage = function (area) {
                if (area != 'N') {
                    $scope.ShowTip(area);
                }
            }

            $scope.ShowTip = function (Type) {
                $(".alter").css("display", "block");
                $scope.Area = Type;
                $("#A").removeClass("Abg");
                $("#B").removeClass("Bbg");
                $("#C").removeClass("Cbg");
                $("#T").removeClass("Tbg");

                $("#" + Type).addClass(Type + "bg");
            }

            $scope.HideTip = function () {
                $(".alter").css("display", "none");
            }


           
        });

    </script>
</body>


</html>